<template>
  <div class="refund-detail">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">
          退款详情
          <span v-if="refundDetail.status !== undefined" class="status-text">
            - {{ getStatusText(refundDetail.status) }}
          </span>
        </h1>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="handleBack" class="back-btn">
          返回
        </el-button>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="10" animated />
    </div>

    <!-- 详情内容 -->
    <div v-else-if="refundDetail.refundNo" class="detail-content">
      <!-- 订单信息 -->
      <div class="info-section">
        <div class="section-title">订单信息</div>
        <div class="info-grid">
          <div class="info-item">
            <label class="info-label">服务编号</label>
            <span class="info-value">{{ refundDetail.refundNo }}</span>
          </div>
          <div class="info-item">
            <label class="info-label">申请状态</label>
            <el-tag
              :type="getStatusType(refundDetail.status)"
              class="status-tag"
            >
              {{ getStatusText(refundDetail.status) }}
            </el-tag>
          </div>
          <div class="info-item">
            <label class="info-label">申请时间</label>
            <span class="info-value">{{
              formatDateTime(refundDetail.createTime)
            }}</span>
          </div>
          <div class="info-item">
            <label class="info-label">用户名</label>
            <span class="info-value">{{ refundDetail.userName || "-" }}</span>
          </div>
          <div class="info-item">
            <label class="info-label">订单编号</label>
            <span class="info-value">
              {{ refundDetail.orderId }}
              <el-button type="text" class="view-link" @click="handleViewOrder">
                查看
              </el-button>
            </span>
          </div>
          <div class="info-item">
            <label class="info-label">订单金额</label>
            <span class="info-value amount"
              >¥{{ refundDetail.orderAmount || 0 }}</span
            >
          </div>
          <div class="info-item">
            <label class="info-label">实际退款金额</label>
            <span class="info-value amount"
              >¥{{ refundDetail.refundAmount || 0 }}</span
            >
          </div>
          <div class="info-item">
            <label class="info-label">退款方式</label>
            <span class="info-value">{{
              getRefundMethodText(refundDetail.refundMethod)
            }}</span>
          </div>
          <div class="info-item">
            <label class="info-label">退款类型</label>
            <span class="info-value">{{
              getRefundTypeText(refundDetail.refundType)
            }}</span>
          </div>
          <div class="info-item full-width">
            <label class="info-label">退款原因</label>
            <span class="info-value">{{
              refundDetail.refundReason || "-"
            }}</span>
          </div>
        </div>
      </div>

      <!-- 处理信息 -->
      <div class="info-section">
        <div class="section-title">处理信息</div>
        <div class="info-grid">
          <div class="info-item">
            <label class="info-label">处理人员</label>
            <span class="info-value">{{ refundDetail.processor || "-" }}</span>
          </div>
          <div class="info-item">
            <label class="info-label">处理时间</label>
            <span class="info-value">{{
              formatDateTime(refundDetail.processedTime)
            }}</span>
          </div>
          <div class="info-item full-width">
            <label class="info-label">备注</label>
            <span class="info-value">{{ refundDetail.remarks || "-" }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 无数据状态 -->
    <div v-else class="empty-state">
      <el-empty description="未找到退款详情" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { OrderAPI, type RefundDetail as RefundDetailType } from "../api/order";

const route = useRoute();
const router = useRouter();

// 加载状态
const loading = ref(true);

// 退款详情数据
const refundDetail = reactive({
  refundNo: "",
  status: undefined as number | undefined,
  createTime: "",
  userName: "",
  orderId: "",
  orderAmount: 0,
  refundAmount: 0,
  refundMethod: 1,
  refundType: 1,
  refundReason: "",
  processor: "",
  processedTime: "",
  remarks: "",
});

// 获取状态文本
const getStatusText = (status: number | undefined) => {
  if (status === undefined) return "未知";
  switch (status) {
    case 0:
      return "待处理";
    case 5:
      return "已完成";
    case 10:
      return "已拒绝";
    default:
      return "未知";
  }
};

// 获取状态标签类型
const getStatusType = (status: number | undefined) => {
  if (status === undefined) return "info";
  switch (status) {
    case 0:
      return "warning";
    case 5:
      return "success";
    case 10:
      return "danger";
    default:
      return "info";
  }
};

// 格式化日期时间
const formatDateTime = (dateString: string | null) => {
  if (!dateString) return "-";
  try {
    const date = new Date(dateString);
    return date.toLocaleString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    });
  } catch (error) {
    return dateString;
  }
};

// 获取退款方式文本
const getRefundMethodText = (method: number) => {
  switch (method) {
    case 1:
      return "退回到原支付渠道";
    case 2:
      return "退回到余额";
    case 3:
      return "退回到银行卡";
    case 5:
      return "余额退回";
    default:
      return "未知方式";
  }
};

// 获取退款类型文本
const getRefundTypeText = (type: number) => {
  switch (type) {
    case 0:
      return "药品订单";
    case 1:
      return "取消订单";
    case 2:
      return "部分退款";
    case 3:
      return "全额退款";
    case 4:
      return "退诊";
    default:
      return "未知类型";
  }
};

// 获取退款详情
const fetchRefundDetail = async () => {
  const id = route.query.id as string;
  if (!id) {
    ElMessage.error("缺少退款ID参数");
    return;
  }

  loading.value = true;
  try {
    // 调用获取退款详情API
    const response = await OrderAPI.getRefundDetail(parseInt(id));

    // 映射API响应数据到组件状态
    refundDetail.refundNo = response.refundNo;
    refundDetail.status = response.refundStatus;
    refundDetail.createTime = response.createTime;
    refundDetail.userName = response.userPhone;
    refundDetail.orderId = response.orderNo;
    refundDetail.orderAmount = response.orderAmount;
    refundDetail.refundAmount = response.refundAmount;
    refundDetail.refundMethod = response.refundMethod;
    refundDetail.refundType = response.orderType;
    refundDetail.refundReason = response.remark;
    refundDetail.processor = response.processedName || "";
    refundDetail.processedTime = response.processedTime || "";
    refundDetail.remarks = response.remark;
  } catch (error) {
    console.error("获取退款详情失败:", error);
    ElMessage.error("获取退款详情失败");
  } finally {
    loading.value = false;
  }
};

// 返回上一页
const handleBack = () => {
  router.back();
};

// 查看订单
const handleViewOrder = () => {
  // 根据订单类型跳转到对应的订单管理页面
  const orderType = refundDetail.refundType;

  switch (orderType) {
    case 0: // 药品订单
      router.push({ name: "DrugOrders" });
      break;
    case 1: // 取消订单 - 可能是药品订单
      router.push({ name: "DrugOrders" });
      break;
    case 2: // 部分退款 - 可能是药品订单
      router.push({ name: "DrugOrders" });
      break;
    case 3: // 全额退款 - 可能是药品订单
      router.push({ name: "DrugOrders" });
      break;
    case 4: // 退诊
      router.push({ name: "InterrogationOrder" });
      break;
    default:
      // 默认跳转到药品订单页面
      router.push({ name: "DrugOrders" });
      break;
  }

  ElMessage.success("正在跳转到订单管理页面");
};

// 组件挂载时获取数据
onMounted(() => {
  fetchRefundDetail();
});
</script>

<style scoped>
.refund-detail {
  padding: 24px;
  background: #f5f5f5;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.status-text {
  color: #e74c3c;
  font-weight: 600;
}

.back-btn {
  background: #409eff;
  border: none;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.back-btn:hover {
  background: #66b1ff;
}

/* 加载状态 */
.loading-container {
  padding: 40px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 详情内容 */
.detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 信息区块 */
.info-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.section-title {
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

/* 信息网格 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item.full-width {
  grid-column: 1 / -1;
}

.info-label {
  font-size: 14px;
  font-weight: 600;
  color: #666;
}

.info-value {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-value.amount {
  color: #e74c3c;
  font-weight: 700;
  font-size: 18px;
}

/* 状态标签 */
.status-tag {
  border-radius: 4px;
  font-weight: 600;
  padding: 4px 8px;
  border: none;
  font-size: 12px;
}

/* 查看链接 */
.view-link {
  color: #409eff;
  font-weight: 600;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.view-link:hover {
  color: #66b1ff;
  background: rgba(64, 158, 255, 0.1);
}

/* 空状态 */
.empty-state {
  padding: 80px 40px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .refund-detail {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .page-title {
    font-size: 20px;
  }

  .info-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .info-item {
    gap: 6px;
  }

  .info-label {
    font-size: 12px;
  }

  .info-value {
    font-size: 14px;
  }
}
</style>
